<script setup>
import _ from 'lodash'
import {ref, reactive, computed, watch, onMounted} from 'vue'
import {getUniqNewPropName, getNodeCompDefInfo, isLeafNode, addChildNodeByType} from '../utils/mutil.js'
import tplCate from '../utils/tpl-cate'

defineOptions({
  name: 'BuilderNodesAdd'
})

// 定义 props
const props = defineProps({
  currentItem: {
    type: Object,
    default: null
  },
  currentItems: {
    type: Array,
    default: () => []
  },
  popData: {
    type: Object,
    default: null
  },
  currentNode: {
    type: Object,
    default: null
  },
  theme: {
    type: String,
    default: ''
  }
})

// 定义 emits
const emit = defineEmits(['close', /*'changeElemNodes',*/ 'selectItem'])

// 方法实现
const handleAddChild = (type) => {
  const def = props.popData?.def
  if (!def) return

  const childDef = addChildNodeByType(type, def, props.currentItem)
  const _code = childDef?._code;
// console.log(props.currentItem)
  // 使用 setTimeout 替代 this.$nextTick
  setTimeout(() => {
    emit('selectItem', {
      targetEleName: _code,
      item: props.currentItem,
      items: props.currentItems
    })
  }, 100)
}

// Watchers
watch(
  () => props.currentNode?.def?._node,
  (newVal, oldVal) => {
    if (isLeafNode(props.currentNode?.def)) {
      emit('close')
    }
  }
)
</script>

<template>
  <div v-if="currentNode" class="ele-design-prop-eles" :class="[ theme, { 'disabled': isLeafNode(currentNode.def) }]">
    <div class="page-builder-menu-group">展示</div>
    <ul>
      <li
        :key="ele.component"
        v-for="ele in tplCate.viewElems"
        @click="handleAddChild(ele.component)"
        v-tippy
        :content="ele.name"
      >
        <JIcon :icon="ele.icon" class="mr-1" />
        <p v-text="ele.name"></p>
      </li>
    </ul>
    <div class="page-builder-menu-group">交互</div>
    <ul>
      <li
        :key="ele.component"
        v-for="ele in tplCate.actionELems"
        @click="handleAddChild(ele.component)"
        v-tippy
        :content="ele.name"
      >
        <JIcon :icon="ele.icon" class="mr-1" />
        <p v-text="ele.name"></p>
      </li>
    </ul>
    <div class="page-builder-menu-group">表单元素</div>
    <ul>
      <li
        :key="ele.component"
        v-for="ele in tplCate.formElems"
        @click="handleAddChild(ele.component)"
        v-tippy
        :content="ele.name"
      >
        <JIcon :icon="ele.icon" class="mr-1" />
        <p v-text="ele.name"></p>
      </li>
    </ul>
    <div class="page-builder-menu-group">表单组件</div>
    <ul>
      <li
        :key="ele.component"
        v-for="ele in tplCate.dataElems"
        @click="handleAddChild(ele.component)"
        v-tippy
        :content="ele.name"
      >
        <JIcon :icon="ele.icon" class="mr-1" />
        <p v-text="ele.name"></p>
      </li>
    </ul>
    <div class="page-builder-menu-group">报表</div>
    <ul>
      <li
        :key="ele.component"
        v-for="ele in tplCate.chartElems"
        @click="handleAddChild(ele.component)"
        v-tippy
        :content="ele.name"
      >
        <JIcon :icon="ele.icon" class="mr-1" />
        <p v-text="ele.name"></p>
      </li>
    </ul>
  </div>
</template>
